<template>
  <div :class="type===1?'Loading1':'Loading2'">
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
  </div>
</template>


<script>
  export default {
    name:'loading',
    props:{
      type:{
        default:1,
        type:Number
      }
    },
  }


</script>


<style lang="scss">
  .Loading2{
    display: flex;
    justify-content: center;
    height: 80*$length;
    width: 80*$length;
    align-items: center;
    & >div {
      width: 10*$length;
      height: 10*$length;
      border-radius: 50%;
      background: #00AAE6;
      opacity: .5;
      margin: 4*$length;
      color: #fff;
      text-align: center;
      line-height: 33px;
      font-size: 1.5rem;
      animation: loading2 0.8s infinite alternate;
    }
    & >div:nth-child(2) {
      animation-delay: 0.4s
    }
    & >div:nth-child(3) {
      animation-delay: 0.6s;
    }

  }
  .Loading1{
    display: flex;
    justify-content: center;
    height: 80*$length;
    width: 80*$length;
    align-items: center;
    & >div {
      width: 10*$length;
      height: 10*$length;
      border-radius: 50%;
      background: #00AAE6;
      opacity: .5;
      margin: 4*$length;
      color: #fff;
      text-align: center;
      line-height: 33px;
      font-size: 1.5rem;
      animation: loading2 1.2s infinite alternate;
    }
    & >div:nth-child(2) {
      animation-delay: 0.4s
    }
    & >div:nth-child(3) {
      animation-delay: 0.6s;
    }

  }

  @keyframes loading2 {
    0% {
      opacity: 0.1;
      transform: translateX(.2rem);
    }
    50%{
      opacity: 1;
      transform: translateX(0rem);
    }
    100% {
      opacity: 0.1;
      transform: translateX(-.2rem);
    }
  }

  @keyframes loading1 {


    from {
      opacity: 1;
      transform: translateY(.5rem);
    }
    to {
      opacity: 0.1;
      transform: translateY(-.5rem);
    }
  }
</style>
